<template>
    <div class="login">
        <div class="box">
            <div class="left">
                <p>用互联网精神服务千家万户</p>
                <h2 class="tit">携手源码 共创明天</h2>
                <p>源码工匠您生活的服务管家</p>
            </div>
            <div class="right">
                <h2 class="tit">欢迎登录</h2>
                <el-form ref="loginFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="ruleForm.account" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password" />
                    </el-form-item>

                    <el-form-item>
                        <el-button class="btn" type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { checkAccReg,checkPassReg } from "@/utils/reg.ts";
// 引入仓库文件
import { useUser } from "@/store/useUser.ts";
let {$login_store} = useUser();  // 解构出仓库中的函数

// 获取元素id
const loginFormRef = ref<any>()
// 定义数据
const ruleForm = reactive({
    account: "",
    password: ""
})
// 触发的函数 账号
const checkAcc = (rule: any, value: any, callback: any) => {
    console.log(rule)
    if (value === '') {
        callback(new Error('请输入账号'))
    }else if( !checkAccReg(value) ){
        callback(new Error('账号请输入4到12'))
    }else{
        callback();
    }
}
// 触发的函数 密码
const checkPwd = (rule: any, value: any, callback: any) => {
    console.log(rule)
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if(!checkPassReg(value)) {
        callback(new Error('密码以字母开头，长度在6~18之间'))
    }else{
        callback();
    }
}
// 验证规则
const rules = reactive<any>({
    account: [{ validator: checkAcc, trigger: 'blur' }],
    password: [{ validator: checkPwd, trigger: 'blur' }]
})

// 点击提交的按钮
const submitForm = () => {
    loginFormRef.value.validate(async (volid:any)=>{
        if(volid){
            // 所有条件都满足 调用仓库中存放的方法
            $login_store({
                account: ruleForm.account,
                password: ruleForm.password
            });
        }else{
            // 验证不通过
            console.log("验证不通过")
        }
    })
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-color: #eee;
    position: relative;

    .box {
        position: absolute;
        display: flex;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .left {
            margin-right: 100px;
            font-size: 16px;
            font-weight: 900;
            line-height: 60px;
            text-align: center;

            .tit {
                font-size: 32px;
                border-bottom: 2px solid #999;
            }
        }

        .right {
            width: 300px;
            height: 320px;
            background-color: #fff;
            padding: 30px;

            .tit {
                line-height: 50px;
            }

            .btn {
                width: 100%;
            }
        }
    }
}
</style>